<template>
  <div>
    <header v-if="modeDisplay">
      <div class="topleft">
        <div class="image"></div>
        <span class="text">智慧配电网仿真平台</span>
      </div>
      <div class="topRight"></div>
    </header>
    <div class="contentWrap">
      <div class="left" v-if="modeDisplay">
        <template v-for="(item, index) in routesList[0].children">
          <el-menu
            :key="index"
            default-active="currentRouter"
            @open="handleOpen"
            @close="handleClose"
            background-color="rgba(1, 126, 129)"
            text-color="#FFF"
            active-text-color="#FFF"
          >
            <el-submenu index="1">
              <template slot="title">
                <span> {{ item.bigTitle }}</span>
              </template>
              <el-menu-item-group
                v-for="(item1, index1) in item.children"
                :key="index1"
              >
                <el-menu-item
                  style="display: flex"
                  :class="
                    currentRouter == item1.path ? 'everyNavAv' : 'everyNav'
                  "
                  :key="index1"
                  @click="toNav(item1.path)"
                >
                  <div style="display: inline-block">
                    <i class="el-icon-location"></i>
                    {{ item1.title }}
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </template>
      </div>
      <div class="right">
        <!-- <div style="height: 50px;">1231131</div> -->

        <div class="content">
          <transition name="fade-transform" mode="out-in">
            <router-view style="height: 100%; width: 100%" />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import routesList from "@/router/index";
export default {
  name: 'homePage',
  data() {
    return {
      currentRouter: this.$route.path,
      routesList: this.$router.options.routes,
      isCollapse: true,
      logo: require('@/assets/images/logo1.png'),
      modeDisplay: true, //菜单和头部展示隐藏
    }
  },
  mounted() {
    this.getUrlParams()
  },
  computed: {},
  // watch: {
  //   // 监听路由对象 $route 的变化
  //   $route(to, from) {
  //     // 更新导航菜单的显示状态
  //     this.toNav()
  //   },
  // },
  watch: {
    // 通过监听路由来控制tab项的高亮，实现点击菜单项时对应的tab项也高亮
    $route: {
      handler(nowPath, oldPath) {
        console.log('indexAside监听到的路由:', nowPath.path, oldPath.path)
        //将当前路由赋值给 menuActive，这里用来控制激活菜单项
        this.currentRouter = nowPath.path
      },
      // 深度观察监听
      deep: true,

      // 监听路由变化 处理两个组件之间的相互跳转，右侧页面产生变化，但左侧菜单选中状态未刷新
      // $route(to, from) {
      //   this.toNav(to.path)
      // },
      //处理activeName生效，但是openNames不生效的情况
      //运用Menu的updateopened方法：手动更新展开的子目录，注意要在 $nextTick 里调用。对openNames添加watch：
      // parentActiveMenu() {
      //   this.$nextTick(() => {
      //     this.$refs.side_menu.updateOpened()
      //     this.$refs.side_menu.updateActiveName()
      //   })
      // },
      // //监听菜单数据的变化'$store.state.users.routers' 固定写法
      // '$store.state.users.routers': function () {
      //   this.initMenuData()
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath, '1111')
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    toNav(router) {
      console.log(this.$route.path)
      this.currentRouter = router
      this.$router.push(router)
    },
    getUrlParams() {
      let url = window.location.href
      // 通过 ? 分割获取后面的参数字符串
      let urlStr = url.split('?')[1]
      // 创建空对象存储参数
      let obj = {}
      if (urlStr) {
        // 再通过 & 将每一个参数单独分割出来
        let paramsArr = urlStr.split('&')
        for (let i = 0, len = paramsArr.length; i < len; i++) {
          // 再通过 = 将每一个参数分割为 key:value 的形式
          let arr = paramsArr[i].split('=')
          obj[arr[0]] = arr[1]
        }
        // return obj
        if (obj) {
          //displayMode=cliplicit
          if (obj.displayMode) {
            this.modeDisplay = false
          } else {
            this.modeDisplay = true
          }
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: white;
}

header {
  // min-width: 1805px; //缩放超出的时候保证头部还有背景颜色
  width: 100%;
  //width: 100%;
  height: 5vh;
  background-color: rgba(1, 126, 129);
  display: flex;
  align-items: center;
  padding: 0 40px;
  .topleft {
    display: flex;
    .image {
      display: inline-block;
      width: 54px;
      height: 40px;
      background: url(@/assets/images/logo1.png) no-repeat;
    }
    .text {
      display: inline-block;
      margin-left: 10px;
      font-size: 26px;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
    }
  }
}
.leftHeader {
  width: 90%;
  color: rgba(64, 158, 255, 1);
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px dashed rgba(64, 158, 255, 1);
  margin: auto;
  margin-bottom: 10px;
  padding: 10px 0;
  // margin-top: 10px;
  .headerTitle {
    width: 140px;
    font-size: 32px;
    margin: auto;
  }
}
.headerTop {
  width: 100%;
  height: 80px;
  background-color: rgba(1, 53, 122);

  font-size: 30px;
  line-height: 80px;
  padding-left: 26px;
  // color: #fff;
  color: #272626;

  box-sizing: border-box;
}

.contentWrap {
  // width: 100%;
  min-width: 1805px; //缩放超出的时候保证头部还有背景颜色
  //height: 93vh;
  height: calc(100% - 5vh); //缩放超出的时候保证头部还有背景颜色
  display: flex;
  // height: 100%;
  justify-content: space-between;
  background: #f3f4f7;
  .left {
    width: 240px;
    background-color: rgba(1, 126, 129);
    height: 100%;
    // background: #f3f4f7;
    .everyNavAv {
      // margin: 10px 24px;
      // height: 50px;
      // line-height: 50px;
      cursor: pointer;
      background-color: rgba(1, 53, 122);
      color: white;
      display: flex;
      justify-content: left;
      // padding-left: 15%;
      // transition: all 0.5s;
    }
    .everyNav {
      // height: 50px;
      // line-height: 50px;

      cursor: pointer;
      align-items: center;
      // margin: 10px 24px;
      color: #272626;
      display: flex;
      justify-content: left;
      // padding-left: 15%;
    }
  }

  .right {
    width: calc(100% - 240px);
    // width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: 100%;
      padding: 1%;
      // height: calc(100% - 50px);
      height: 100%;
    }
  }
}

.everyNavAv:nth-child(1)::before,
.everyNavAv:nth-child(2)::before,
.everyNavAv:nth-child(3)::before,
.everyNavAv:nth-child(4)::before,
.everyNavAv:nth-child(5)::before {
  content: '';
  transform: translateY(12px);
  display: inline-block;
  width: 28px;
  height: 28px;
}

// .everyNavAv:nth-child(1)::before {
//   background: url(@/assets/layout/collect_active.png) no-repeat;
// }
// .everyNavAv:nth-child(2)::before {
//   background: url(@/assets/layout/photovoltaic_active.png) no-repeat;
// }
// .everyNavAv:nth-child(3)::before {
//   background: url(@/assets/layout/windpower_active.png) no-repeat;
// }
// .everyNavAv:nth-child(4)::before {
//   background: url(@/assets/layout/conventional_active.png) no-repeat;
// }
// .everyNavAv:nth-child(5)::before {
//   background: url(@/assets/layout/maintenance_active.png) no-repeat;
// }
.everyNav:nth-child(1)::before,
.everyNav:nth-child(2)::before,
.everyNav:nth-child(3)::before,
.everyNav:nth-child(4)::before,
.everyNav:nth-child(5)::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
}

// .everyNav:nth-child(1)::before {
//   background: url(@/assets/layout/collect.png) no-repeat;
// }
// .everyNav:nth-child(2)::before {
//   background: url(@/assets/layout/photovoltaic.png) no-repeat;
// }
// .everyNav:nth-child(3)::before {
//   background: url(@/assets/layout/windpower.png) no-repeat;
// }
// .everyNav:nth-child(4)::before {
//   background: url(@/assets/layout/conventional.png) no-repeat;
// }
// .everyNav:nth-child(5)::before {
//   background: url(@/assets/layout/maintenance.png) no-repeat;
// }


/* 改变elementui 侧边栏移入颜色 */
::v-deep .el-menu-item:hover {
  background: rgb(86,175,190) !important;
  color: #fff !important;
}
::v-deep .el-submenu__title:hover {
  background: rgb(86,175,190) !important;
  color: #fff !important;
}
::v-deep .el-menu-item.is-active {
  background: rgb(86,175,190) !important;
  color: #fff !important;
}
::v-deep .el-submenu__title.is-active {
  background: rgb(86,175,190)f !important;
  color: #fff !important;
}
</style>
